<template>
  <view class="order-list-page">
    <!-- 订单列表 -->

    <view class="order-list">
      <view
        v-for="(order, index) in prolist"
        :key="order.id"
        class="order-item"
        :class="{ selected: selectedOrders.includes(order.id) }"
        @click.stop="toggleSelect(order.id)"
      >
        <!-- <checkbox :checked="selectedOrders.includes(order.id)" class="order-checkbox" /> -->
        <view
          class="custom-checkbox"
          :class="{ checked: selectedOrders.includes(order.id) }"
          :style="{
            background: selectedOrders.includes(order.id) ? '#871c87' : '',
            borderColor: selectedOrders.includes(order.id) ? '#871c87' : '',
          }"
          @click.stop="toggleSelect(order.id)"
        >
          <!-- <view class="checkbox-inner" v-if="selectedOrders.includes(order.id)">✓</view> -->
          <image
            v-if="selectedOrders.includes(order.id)"
            class="radio-img"
            src="/static/img/checkd.png"
            mode="aspectFit"
          />
        </view>
        <view class="order-info">
          <view class="order-header">
            <!-- <text class="order-no">订单号：{{order.ordernum}}</text> -->
            <!-- <text class="order-status">{{getStatusText(order.status)}}</text> -->
          </view>

          <view class="goods-info">
            <image :src="order.pic" class="goods-image" mode="aspectFill" />
            <view class="goods-detail">
              <view class="goods-name">{{ order.name }}</view>
              <!-- <view class="goods-spec">{{order.ggname}}</view> -->
              <view class="goods-price">¥{{ order.sell_price }}</view>
            </view>
          </view>

          <!-- <view class="order-footer">
            <text class="order-time">{{formatTime(order.createtime)}}</text>
            <text class="order-amount">实付：¥{{order.real_totalprice}}</text>
          </view> -->
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-action-bar">
      <!-- <view class="select-all" @click="toggleSelectAll">
				<checkbox :checked="isAllSelected" />
				<text>全选</text>
			</view> -->
      <view class="select-all custom-select-all" @click="toggleSelectAll">
        <view
          class="custom-checkbox"
          :class="{ checked: isAllSelected }"
          :style="{
            background: isAllSelected ? '#871c87' : '',
            borderColor: isAllSelected ? '#871c87' : '',
          }"
        >
          <!-- <view class="checkbox-inner" v-if="isAllSelected">✓</view> -->
          <image
            v-if="isAllSelected"
            class="radio-img"
            src="/static/img/checkd.png"
            mode="aspectFit"
          />
        </view>
        <text>全选</text>
      </view>
      <view class="action-buttons">
        <!-- <button class="share-btn" :style="{
				    color: selectedOrders.length > 0 ? '#871c87' : '', 
				    borderColor: selectedOrders.length > 0 ? '#871c87' : '#ccc'  
				  }" :disabled="selectedOrders.length === 0" @click="handleShareTimeline">
					分享微信朋友圈
				</button> -->

        <button
          class="share-btn share-friend"
          open-type="share"
          :style="{
            background: '#871c87',
            borderColor: selectedOrders.length > 0 ? '#871c87' : '#ccc',
          }"
          :disabled="selectedOrders.length === 0"
          @click.stop="shareToFriend"
          ref="shareButton"
        >
          分享微信好友
        </button>
        <!-- <button class="share-btn share-friend" @click="shareToFriend">分享好友</button> -->
      </view>
    </view>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      prolist: [],
      selectedOrders: [], // 选中的订单ID数组
      opt: {},
      shareData: {},
      member: {},
      canShare: false,
    };
  },
  computed: {
    // 是否全选
    isAllSelected() {
      return (
        this.selectedOrders.length === this.prolist.length &&
        this.prolist.length > 0
      );
    },
  },
  onLoad(opt) {
    this.opt = app.getopts(opt);
    this.getdata();
  },
  // onShareAppMessage() {

  // 	return {
  // 		title: this.shareTitle,
  // 		path: this.sharePath,
  // 		imageUrl: this.prolist[0]?.pic || ''
  // 	};
  // },
  onShareAppMessage() {
    // 判断是否选择了订单
    if (this.selectedOrders.length === 0) {
      uni.showToast({
        title: "请先选择要分享的订单",
        icon: "none",
        duration: 2000,
      });
      // 返回一个空对象阻止分享
      return {};
    }

    // 获取第一个选中订单的图片（如果有）
    const firstSelectedOrder = this.prolist.find((order) =>
      this.selectedOrders.includes(order.id)
    );

    return {
      title: this.member.tips,
      path: "/pages/pay/share_detail?id=" + this.opt.id,
      imageUrl: firstSelectedOrder?.pic || "", // 使用选中订单的图片
    };
  },
  onShareTimeline() {
    const firstSelected = this.prolist.find((item) =>
      this.selectedOrders.includes(item.id)
    );

    return {
      title: firstSelected?.name || "好物推荐",
      query: `id=${this.opt.id}`,
      imageUrl: firstSelected?.pic || "",
    };
  },
  methods: {
    getdata: function () {
      var that = this;
      that.loading = true;
      app.get(
        "order/getShareOrderDetail",
        {
          id: that.opt.id,
        },
        function (res) {
          that.loading = false;
          that.prolist = res.data.prolist || [];
          that.member = res.data.member;
        }
      );
    },
    async handleShareTimeline() {
      if (this.selectedOrders.length === 0) {
        uni.showToast({
          title: "请选择订单",
          icon: "none",
        });
        return;
      }

      try {
        // 方案1：引导用户操作
        this.guideToShareTimeline();

        // 或者方案2：生成图片
        // await this.shareToCircle();
      } catch (error) {
        console.error("分享失败", error);
      }
    },

    guideToShareTimeline() {
      uni.showModal({
        title: "分享到朋友圈",
        content: '请点击右上角"···"选择"分享到朋友圈"',
        confirmText: "我知道了",
      });
    },
    preventDefault() {
      if (this.selectedOrders.length === 0) {
        uni.showToast({
          title: "请先选择要分享的订单",
          icon: "none",
        });
      }
    },

    // 切换单个订单选择状态
    toggleSelect(orderId) {
      const index = this.selectedOrders.indexOf(orderId);
      if (index > -1) {
        this.selectedOrders.splice(index, 1);
      } else {
        this.selectedOrders.push(orderId);
      }
    },

    // 全选/取消全选
    toggleSelectAll() {
      if (this.isAllSelected) {
        this.selectedOrders = [];
      } else {
        this.selectedOrders = this.prolist.map((order) => order.id);
      }
    },

    // 获取订单状态文本
    getStatusText(status) {
      const statusMap = {
        1: "待付款",
        2: "待发货",
        3: "待收货",
        4: "已完成",
      };
      return statusMap[status] || "未知状态";
    },

    // 分享给好友
    shareToFriend() {
      // if (this.selectedOrders.length === 0) {
      // 	uni.showToast({
      // 		title: '请选择要分享的订单',
      // 		icon: 'none'
      // 	});
      // 	return;
      // }
      // this.shareData = {
      // 	title: '我在和大好物买的好货，推荐给你~',
      // 	path: '/pages/pay/share_detail?id=' + this.opt.id,
      // 	imageUrl: this.prolist[0]?.pic || ''
      // }
    },
  },
};
</script>

<style>
.order-list-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.order-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
  padding-bottom: 120rpx;
  /* 底部栏高度 + 一些额外空间 */
}

.order-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
}

.custom-checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 1px solid #ddd;
  border-radius: 50%;
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-checkbox.selected {
  background: rgb(135, 28, 135);
  border-color: rgb(135, 28, 135);
}

.checkbox-inner {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

/* .order-item.selected {
    background-color: #f0f7ff;
  } */

.order-checkbox {
  margin-right: 20rpx;
}

.order-info {
  flex: 1;
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.order-no {
  font-size: 26rpx;
  color: #666;
}

.order-status {
  font-size: 26rpx;
  color: #e74c3c;
}

.goods-info {
  display: flex;
  margin-bottom: 20rpx;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
}

.goods-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.goods-name {
  font-size: 28rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.goods-spec {
  font-size: 24rpx;
  color: #999;
}

.goods-price {
  font-size: 28rpx;
  color: #e74c3c;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
}

.order-time {
  color: #999;
}

.order-amount {
  color: #333;
  font-weight: bold;
}

.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx 40rpx 30rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 100;
  /* 确保底部栏在最上层 */
}

.select-all {
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.select-all checkbox {
  margin-right: 10rpx;
}

.action-buttons {
  display: flex;
}

.share-btn {
  margin-left: 20rpx;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 28rpx;
  color: #fff;
  border-radius: 35rpx;
  border: 1px solid #ccc;
}

.share-circle {
  background-color: #f39c12;
}

.share-friend {
  background-color: #871c87;
}

.share-btn[disabled] {
  opacity: 0.6;
  background-color: #ccc !important;
}

.radio-img {
  width: 30rpx;
  height: 40rpx;
}
</style>
